<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../lib/layui/css/layui.css" media="all">
		<link rel="stylesheet" href="../../static/css/weadmin.css">
		<style>
			.form-wrap {
				padding: 10px;
			}
			select {
				width: 380px;
				height: 38px;
				line-height: 1.3;
				border-width: 1px;
				border-style: solid;
				border-color: #e6e6e6;
				background-color: #fff;
				border-radius: 2px;
			}
			.layui-form-item .layui-form-label{
				width: 110px;
			    padding: 8px 15px;
			    height: 38px;
			    line-height: 20px;
			    border-width: 1px;
			    border-style: solid;
			    border-radius: 2px 0 0 2px;
				border-color: #e6e6e6;
			    text-align: center;
			    background-color: #FBFBFB;
			    overflow: hidden;
			    white-space: nowrap;
			    text-overflow: ellipsis;
			    box-sizing: border-box;
			}
			.layui-form-item .layui-input-inline{
				width: 380px;
			}
		</style>
	</head>

	<body>
		<div class="form-wrap">																
			<form id="area_form" action="" method="post" class="layui-form layui-form-pane" enctype="multipart/form-data">
				<div class="layui-form-item">
					<label for="area_code" class="layui-form-label">
                        <span class="we-red">*</span>区域编号
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="area_code" name="areaCode" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="area_name" class="layui-form-label">
                        <span class="we-red">*</span>区域名称
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="area_name" name="areaName" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="area_note" class="layui-form-label">
                        <span class="we-red">*</span>备注
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="area_note" name="note" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label for="sort_code" class="layui-form-label">
                        <span class="we-red">*</span>排序码
                    </label>
					<div class="layui-input-inline">
						<input type="text" id="sort_code" name="sortCode" required="" lay-verify="required" autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item" id="img_insert_div">
		           <label class="layui-form-label">区域头像</label>
		           <div class="layui-input-block">
							<img id="area_icon_file" name="imgViewPath" width="100px" style="display:none" height="100px" src=""/>
							<input type="button" id="change_area_icon_button" value="选择(375 * 200)"/>
							<input type="file"  id="change_area_icon_input" name="file" style="display:none"/>
		           </div>
		        </div>
				<div class="layui-form-item">
					<label class="layui-form-label">下属省份</label>
					<div class="layui-input-block" class="province_checkbox" id="province_checkbox">

					</div>
				</div>
				<div class="layui-form-item">
					<button class="layui-btn" lay-submit="" lay-filter="add">提交</button>
				</div>
			</form>
		</div>
		<script src="../../publicjs/jquery-1.8.0.min.js"></script>
		<script src="../../publicjs/smallkingutil.js"></script>
		<script src="../../publicjs/area.js"></script>
		<script src="../../publicjs/select.js"></script>
		<script src="../../lib/layui/layui.js"></script>
		<script type="text/javascript">
			layui.use(['form', 'layer'], function() {
				var form = layui.form,
					layer = layui.layer;
				// 先判断当前的操作是新增还是修改
				var areaId = commonUtil.getRequestParam("areaId");
				if (areaId){
					// 请求后台得到当前修改的用户数据，将其显示在表单里
					var ajaxParam = {
						url : commonUtil.domain() +'/admin/wxwork/area/detail',
						data : {
							areaId : areaId
						}
					}
					// 发送ajax 提交表单数据
					ajaxUtil.post(ajaxParam, function(data) {
						if(data.code == 200){
							var province = data.data.provinceList;
							if(!province){
								province = "";
							}
							var parent = $('#province_checkbox');
							parent.html("");
							var dataList = provinceList;
							var childStr;
							for(var i = 0; i < dataList.length; i++) {
								var item = dataList[i];
								var checked = "";
								if(province.indexOf(item.provinceCode) > -1){
									checked = "checked";
								}
								childStr = '<input type="checkbox" class="province_checkbox" value="' + item.provinceCode + "-" + item.provinceName + '" title="' + item.provinceName + '"' + checked + '  lay-filter="resourceCheck">'
								parent.append(childStr);
							}
							form.render("checkbox"); // 更新下拉框值
							formUtil.setForm($('#area_form'), data.data);
						}else{
							layer.alert(data.msg);
						}
    				});
				}else{
					var parent = $('#province_checkbox');
					parent.html("");
					var dataList = provinceList;
					var childStr;
					for(var i = 0; i < dataList.length; i++) {
						var item = dataList[i];
						var checked = "";
						childStr = '<input type="checkbox" class="province_checkbox" value="' + item.provinceCode + "-" + item.provinceName + '" title="' + item.provinceName + '"' + checked + '  lay-filter="resourceCheck">'
						parent.append(childStr);
					}
					form.render("checkbox"); // 更新下拉框值
				}
				// 监听表单提交
				form.on('submit(add)', function(data) {
					var data = data.field;
					// 提交之前 先遍历图中的省份checkbox 找出被勾选的
					var provinceListStr = "";
					$('.province_checkbox').each(function() {
						var isChecked = $(this).attr('checked');
						if(isChecked) {
							provinceListStr += $(this).val() + ",";
						}
					});
					if(provinceListStr != ""){
						provinceListStr = provinceListStr.substring(0, provinceListStr.length - 1);
					}
					data.provinceList = provinceListStr;
					var url,msg;
					// 有areaId就是修改，没有areaId就是新增
					if(areaId){
						url = commonUtil.domain() +"/admin/wxwork/area/update";
						msg = "修改区域";
						data.areaId = areaId;
					}else{
						url = commonUtil.domain() +"/admin/wxwork/area/insert";
						msg = "新增区域";
					}
					var ajaxParam = {
						url : url
					}
					var formData = new FormData();
					for(var key in data){
						formData.append(key, data[key]);
					}
					formData.append("file", document.getElementById('change_area_icon_input').files[0]);
					// 发送ajax 提交表单数据
					ajaxUtil.submitForm(formData, ajaxParam, function(data) {
						if(data.code == 200){
							layer.alert(msg + "成功", {
								icon: 6
							}, function() {
								// 刷新父级的用户表格
								var parentHtml = window.parent;
								parentHtml.areaTable.refresh();
								//关闭当前frame
								var index = parentHtml.layer.getFrameIndex(window.name);
								parentHtml.layer.close(index);
							});
						}else{
							layer.alert(data.msg);
						}
					});
					/* ajaxUtil.post(ajaxParam, function(data) {
						if(data.code == 200){
							layer.alert(msg + "成功", {
								icon: 6
							}, function() {
								// 刷新父级的用户表格
								var parentHtml = window.parent;
								parentHtml.areaTable.refresh();
								//关闭当前frame
								var index = parentHtml.layer.getFrameIndex(window.name);
								parentHtml.layer.close(index);
							});
						}else{
							layer.alert(data.msg);
						}
    				}); */
					return false;
				});
			});
			
			$(function(){
				// 点击更换图片按钮
				commonUtil.setMaxLength(40);
				$('#change_area_icon_button').click(function() {
					$('#change_area_icon_input').click();
					document.getElementById("change_area_icon_input").onchange = function(){
						var imgFile = document.getElementById('change_area_icon_input').files[0];
						var fileName = imgFile.name.toLowerCase();
						if(!fileName.endWith("jpg") && !fileName.endWith("png")
								&& !fileName.endWith("gif") && !fileName.endWith("jpeg")){
							layer.msg('只支持jpg，png，gif类型图片');
							return;
						}
						var read = new FileReader();
						read.readAsDataURL(imgFile);
						read.onload = function (e) {
							$('#area_icon_file').show();
							$('#area_icon_file').attr("src", this.result);
						}
					};
				});
			});
		</script>
	</body>
</html>